import React from 'react';
import PropTypes from 'prop-types';

export default class SelectMenu extends React.Component {
  static propTypes = {
    data: PropTypes.arrayOf(PropTypes.object),
    onChange: PropTypes.func,
    popupClassName: PropTypes.string,
    customizedItemRender: PropTypes.func,
  };

  static defaultProps = {
    data: [],
    onChange: () => {},
    popupClassName: '',
    customizedItemRender: null,
  };

  render() {
    const { data, popupClassName, customizedItemRender, value } = this.props;

    return (
      <div className={`customized-select-pop-container ${popupClassName}`}>
        {!!data &&
          data.map((item) => {
            return (
              <div
                onClick={() => {
                  this.props.onChange(item);
                }}
              >
                {customizedItemRender && customizedItemRender(item, value)}
              </div>
            );
          })}
      </div>
    );
  }
}
